<template>
  <ul class="contact_container">
     <li>
      <a href="#">
        <div class="icon">
          <Icon type="github" />
        </div>
        <span>{{data.githubName}}</span>
      </a>
    </li>

       <li>
      <a href="#">
        <div class="icon">
          <Icon type="mail" />
        </div>
        <span>{{data.mail}}</span>
      </a>
    </li>

    <li>
      <a :href="`tencent://message/?Menu=yes&uin=${data.qq}&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45`">
        <div class="icon">
          <Icon type="qq" />
        </div>
        <span>{{data.qq}}</span>
        <div class="pro">
          <img :src="data.qqQrCode" alt="">
        </div>
      </a>
    </li>

     <li>
      <a href="mailto:hesong1999@126.com">
        <div class="icon">
          <Icon type="weixin" />
        </div>
        <span>{{data.weixin}}</span>
        <div class="pro">
          <img :src="data.weixinQrCode" alt="">
        </div>
      </a>
    </li>
    <p class="txt">{{data.icp}}</p>
  </ul>
</template>

<script>
import {mapState} from 'vuex'
import Icon from "@/components/Icon";
export default {
  components: {
    Icon,
  },
  computed: {
    ...mapState("setting",["data"])
  }
};
</script>

<style lang="less" scoped>
@import url("~@/style/var.less");
@import url("~@/style/global.less");
.contact_container {
  list-style: none;
  padding: 20px;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  color:@gray;
  .txt{
    text-align: center;
    margin-top: 30px;
    font-size: 14px;
    opacity: .5;

  }
  li {
    height: 30px;
    line-height: 30px;
    margin: 14px 0;
    position: relative;
    &:hover{
      .pro{
    transform: scaleY(1);
      } 
    }
  }
  span{
    font-size: 16px;
  }
  a{
    display: flex;
    align-items: center;
  }
  .icon{
    width: 36px;
    font-size: 26px;
  }
  .pro{
    position: absolute;
    left: 0;
    bottom: 30px;
    background: #fff;
    padding: 10px 15px;
    transform: scaleY(0);
    transition: .4s;
    transform-origin:center  bottom;
    &::after{
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      width: 8px;
      bottom: -4px;
      height: 8px;
      background: #fff;
    }
    img{
      width: 150px;
      height: 150px;
    }
  }
}
</style>
